<template>
	<view class="warp">
		<!-- background pic start -->
		<view class="bg" :style="{height:'calc(440rpx + ' + StatusBar + 'px)'}">
			<view class="logo-contnt flex align-center justify-center flex-direction">
				<view class="logo width-180 height-180"></view>
				<!-- <view>欢迎来到fust-UI</view> -->
			</view>
		</view>
		<!-- background pic end -->

		<!-- 密码login start -->
		<view class="flex align-center solid-bottom margin-lr padding-tb">
			<image class="width-34 margin-right" src="../../static/phone1.png" mode="widthFix"></image>
			<input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
				:placeholder="i18n['请输入手机号']" name="input" />
		</view>
		<view class="flex align-center solid-bottom margin-lr padding-tb">
			<image class="width-34 margin-right" src="../../static/yzm.png" mode="widthFix"></image>
			<view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
				<input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" type="number"
					v-model="vercode" :placeholder="i18n['请输入验证码']" minlength="4" />
				<view class="text-theme" @click="handleSendVerCode">
					{{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}
				</view>
			</view>
		</view>
		<view class="flex align-center justify-between text-333 padding-lr margin-top-sm">
			<view class=" " @click="handleJump" data-url="/pages/user/login/forget/index">{{i18n['忘记密码']}}</view>
			<view @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/login-password/index">
				{{i18n['密码登录']}}
			</view>
		</view>
		<!-- 密码login end -->
		<!-- 立即登录按钮 start -->
		<button type="success" class="text-white radius-100 margin-lr-lg margin-top-lg bg-theme fu-fs32" shape="circle"
			@click="handleLogin">
			{{i18n['登录']}}
		</button>
		<view class="padding-top text-center text-red" @tap='toPage' v-if="isAvoid">
			商家入驻>>
		</view>
		<!-- 立即登录按钮 end -->
		<!-- <view class="margin-top flex align-center justify-center text-999 fu-fs28">
      <view class="margin-right" @tap="handleJump" data-type="REDIRECT" :data-url="'/pages/user/login/register/index'">{{i18n['注册账号']}}</view>
      <view class=" " @click="handleJump" data-url="/pages/user/login/forget/index">{{i18n['忘记密码']}}</view>
    </view> -->
		<view class="footer" v-if='false'>
			<!-- 快捷登陆 start -->
			<ThirdLogin :is_agree="is_select_agree" v-if='isSwitch==0'></ThirdLogin>
			<!-- 快捷登陆 end -->
			<!-- 协议同意 start -->
			<view class="flex align-center justify-center text-666 fu-fs24 margin-top-64">
				<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree"
					src="../../static/check.png"></image>
				<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else
					src="../../static/unchecked.png"></image>
				<view>
					{{i18n['已阅读并同意']}}
					<text class="text-theme" @tap="handleJump"
						data-url="/pages/user/login/user-agreement/index?id=1">《用户协议》</text>
					{{i18n['与']}}
					<text class="text-theme" @tap="handleJump"
						data-url="/pages/user/login/user-agreement/index?id=2">{{i18n['《隐私政策》']}}</text>
				</view>
			</view>
			<!-- 协议同意 end -->
		</view>
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->

	</view>
</template>

<script>
	// 引入验证方法
	import {
		validate
	} from "@/common/utils/index";
	import {
		SYSTEM_CONFIG
	} from "@/common/config.js";
	import ThirdLogin from '../../components/third-login/third-login.vue';
	export default {
		components: {
			ThirdLogin
		},
		data() {
			return {
				is_select_agree: false,
				phone: '', // 手机号,@String
				vercode: '', // 验证码,@String
				isLoading: false, // 立即登录按钮是否点击,@Boolean
				time: 60, // 倒计时60S,@Number
				beginning: false, // 显示倒计时,@Boolean
				timer: null, // 计时器,@Function
			};
		},
		onLoad() {
			this.isSwitch = this.$store.state.isSwitch;
      // console.log(this.isAvoid,'isAvoid');
		},
		onUnload() {
			// 页面关闭时清除计时器，优化性能
			clearInterval(this.timer);
		},
		methods: {
			toPage() {
				uni.redirectTo({
					url: '/pages/user/shop/shop-come/index'
				})
			},
			/**
			 * @param 是否选择同意协议
			 */
			handle_select() {
				this.is_select_agree = !this.is_select_agree
			},
			/**
			 * @event 立即登录按钮点击事件
			 */
			handleLogin() {
				// 如果按钮状态是加载中，直接return，防止用户多次点击
				if (this.isLoading) return;
				// if (!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
				// #ifdef APP-PLUS
				// @desc 隐藏安全键盘
				plus.key.hideSoftKeybord();
				// #endif

				// 结构出来phone手机号，vercode验证码
				let {
					phone,
					vercode
				} = this;
				// 如果手机号为空就提示用户
				if (!phone) return this.$message.info(this.i18n['请输入手机号']);
				// 手机号不符合正则验证
				if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
				// 如果验证码为空就提示用户
				if (!vercode) return this.$message.info(this.i18n['验证码不能为空']);

				let clientId = 'clientId'
				let appSystem = 'appSystem'

				// #ifdef APP-PLUS
				clientId = plus.push.getClientInfo().clientid || '';
				appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
				// #endif
				// 上述验证都通过，将按钮的点击状态改为true
				this.isLoading = true;
				/**
				 * @desc 请求验证码登录接口
				 * @param {String} global.apiUrls.postUserMobileLogin - 请求的接口,v1/5c78dca45ebc1,
				 * @param {Object} {} - 携带参数
				 * @param {String} {}.mobile - 手机号
				 * @param {String} {}.code - 验证码
				 */
				this.$api
					.post(global.apiUrls.postUserMobileLogin, {
						mobile: phone,
						code: vercode,
						user_source: SYSTEM_CONFIG.platform,
						clientId,
						appSystem,
						user_type: '3', //0普通用户 1代理 2业务员 3商家 4分理处 5扫码收货 6核验装车 7司机 8入仓条码打印
					})
					.then(res => {
						// 如果返回code码为1，且数据存在
						if (res.data.code == 1 && res.data.data) {
							// 提示用户，后台返回的信息
							this.$message.info(res.data.msg);
							// run_type 1：入仓   2：非入仓
							if (res.data.data.userinfo.run_type == 1) {
								this.setTabBarItem1();
							} else { //非入仓
								this.setTabBarItem();
							}
							/**
							 * @desc 向Vuex发送事件
							 * @param {Object} res.data.data.userinfo - 后台返回来的用户信息
							 */
							this.$store.commit('updateUserInfo', res.data.data.userinfo);
							// joinin_state  1：审核中  2：待提交支付费用  3：被驳回   4：待财务审核  5：审核通过  6：财务审核失败

							let joinin_state = res.data.data.joinin_state;
							let store_id = res.data.data.store_id;
							uni.setStorageSync('store_joinin_id',store_id)
							if (joinin_state != 5) {
								uni.navigateTo({
									url: '/pages/user/shop/shop-success/index'
								})
								return;
							} else {
								setTimeout(() => {
									// 把按钮的状态改为false
									this.isLoading = false;
									uni.switchTab({
										url: '/pages/tab/home/shopindex/index'
									})
								}, 800)
							}

						} else if (res.data.code ==' -999') { //表示是没有入住的账号
							this.$message.info('该账号还未入驻')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/user/shop/shop-come/index'
								})
							}, 500)
						} else {
							
							// 把按钮的状态改为false
							this.isLoading = false;
							// 错误的情况下向用户发送后台返回来的长度
							this.$message.info(res.data.msg);
						}
					}).catch(err => {
						// 把按钮的状态改为false
						this.isLoading = false;
					});
			},
			/**
			 * @event 发送验证码
			 */
			handleSendVerCode() {
				// 如果按钮状态是加载中，直接return，防止用户多次点击
				if (this.isLoading) return;
				// 如果有倒计时，return false
				if (this.beginning) return;
				// if (!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
				// 从this里结构出来phone
				let {
					phone
				} = this;

				if (!phone) return this.$message.info(this.i18n['请输入手机号']);
				// 如果手机号不正确就提示用户
				if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
				// 上述验证都通过，将按钮的点击状态改为true
				this.isLoading = true;
				/**
				 * @desc 请求验证码接口
				 * @param {Object} {} - 参数
				 * @param {Boolean} {}.is_test - 是否是测试环境
				 * @param {String} {}.mobile - 手机号
				 * @param {String} {}.type - 类型
				 */
				this.$api
					.post(global.apiUrls.GetVerifyCode, {
						is_test: global.IS_DEV,
						mobile: phone,
						type: '3',
						user_type: '3', //0普通用户 1代理 2业务员 3商家 4分理处 5扫码收货 6核验装车 7司机 8入仓条码打印
					})
					.then(res => {
						// 如果后台返回的code码为1
						if (res.data.code == 1) {
							this.beginning = true;
							// 清除倒计时,防抖作用
							clearInterval(this.timer);
							this.timer = setInterval(() => {
								if (this.time == 1) {
									//倒计时结束就清楚这个倒计时
									clearInterval(this.timer);
									this.time = 60; // 倒计时60s
									this.beginning = false; // 是否显示倒计时改为false
									return;
								}
								this.time--;
							}, 1000);
							// 向用户发送提示
							if (res.data.data.code) {
								this.$message.info(this.i18n['验证码为'] + res.data.data.code);
								this.vercode = res.data.data.code;
							}
							// 把按钮的状态改为false
							this.isLoading = false;
						} else {
							this.beginning = false; // 是否显示倒计时改为false
							// 把按钮的状态改为false
							this.isLoading = false;
							// 如果报错，向用户提示
							this.$message.info(res.data.msg);
						}
					})
					.catch(function(err) {
						// 把按钮的状态改为false
						this.isLoading = false;
					});
			},
		}
	};
</script>

<style lang="scss" scoped>
	// 主体 start
	.warp {
		background: #fff;
		min-height: 100vh;
		overflow: hidden;

		// background pic start
		.bg {
			width: 100%;
			position: relative;

			.logo-contnt {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.logo {
					background-image: url('/static/logo.png');
					background-repeat: no-repeat;
					background-size: contain;
					border-radius: 40rpx;
					overflow: hidden;
				}
			}
		}



		// background pic end
		// 验证码login end

	}

	// 主体 end
	.footer {
		position: fixed;
		bottom: 116rpx;
		bottom: calc(116rpx + constant(safe-area-inset-bottom));
		bottom: calc(116rpx + env(safe-area-inset-bottom));
		width: 100%;
	}
</style>